<template>
    <div class="sildeBar-container">
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#304156" text-color="#BFCBD9" active-text-color="#FFF" router :collapse="isCollapse">
            <SildeItem v-for="item in rs" :key="item.path" :item="item"></SildeItem>
        </el-menu>
    </div>
</template>

<script>
import { mapState } from "vuex";
import SildeItem from "./SildeItem.vue";
import index from "@/router/index";
export default {
    data() {
        return {
            rs: [],
        };
    },
    computed: {
        ...mapState(["isCollapse"]),
    },
    mounted() {
        // 获取rs
        index.options.routes.forEach((e) => {
            if (e.name == "main") {
                if (e.children) {
                    this.rs = e.children;
                }
            }
        });
    },
    methods: {},
    watch: {},
    components: {
        SildeItem,
    },
};
</script>

<style scoped>
.sildeBar-container {
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

.el-menu-vertical-demo {
    height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>